<template>
  <view class="viewport">
    <view class="content">
      <image
        src="/static/images/login/fhui@2x.png"
        mode="aspectFill"
        class="back-icon"
        @click="onBack"
      ></image>
      <view class="login-box">
        <view class="login-title">Reset password with email</view>
        <view class="login-tips"></view>
        <form @submit="formSubmit">
          <view class="input-box" v-if="steps == 1">
            <image
              src="/static/images/login/email@2x.png"
              mode="aspectFill"
              class="input-icon"
            ></image>
            <input
              class="input"
              :value="form.account"
              name="account"
              data-name="account"
              placeholder="Email"
              @input="onInput"
              @blur="onBlur"
            />
          </view>
          <template v-else>
            <view class="input-box">
              <image
                src="/static/images/login/yanzhengma@2x.png"
                mode="aspectFill"
                class="input-icon"
              ></image>
              <input
                class="input"
                :value="form.verificationCode"
                type="number"
                name="verificationCode"
                data-name="verificationCode"
                placeholder="Verification code"
                @input="onInput"
                maxlength="6"
              />
            </view>

            <view class="input-box">
              <image :src="newPic" mode="aspectFill" class="input-icon"></image>
              <input
                class="input"
                :value="form.newPassword"
                :password="newPassword"
                data-name="newPassword"
                name="newPassword"
                placeholder="Password"
                @input="onInput"
                @blur="onBlur"
                maxlength="20"
              />
              <image
                class="close-eye-icon"
                @click="changeStatus"
                data-name="newPassword"
                src="/static/images/login/biyan@2x.png"
                mode="aspectFill"
                v-if="newPassword"
              >
              </image>
              <image
                class="open-eye-icon"
                @click="changeStatus"
                data-name="newPassword"
                src="/static/images/login/zhengyan@2x.png"
                mode="aspectFill"
                v-else
              ></image>
            </view>
            <view class="input-box">
              <image :src="confirmPic" mode="aspectFill" class="input-icon"></image>
              <input
                class="input"
                :value="form.confirmPassword"
                :password="confirmPassword"
                data-name="confirmPassword"
                name="confirmPassword"
                placeholder="Confirm password"
                @input="onInput"
                @blur="onBlur"
                maxlength="20"
              />
              <image
                class="close-eye-icon"
                @click="changeStatus"
                data-name="confirmPassword"
                src="/static/images/login/biyan@2x.png"
                mode="aspectFill"
                v-if="confirmPassword"
              >
              </image>
              <image
                class="open-eye-icon"
                @click="changeStatus"
                data-name="confirmPassword"
                src="/static/images/login/zhengyan@2x.png"
                mode="aspectFill"
                v-else
              ></image>
            </view>
          </template>
          <button
            class="submit-btn unactive"
            v-if="
              (steps == 1 && !form.account) ||
              (steps == 2 &&
                (!form.verificationCode ||
                  !form.confirmPassword ||
                  !form.account ||
                  !form.newPassword))
            "
          >
            Confirm
          </button>
          <template v-else>
            <button class="submit-btn" form-type="submit" v-if="steps == 1">Send</button>
            <button class="submit-btn" form-type="submit" v-else>Confirm</button>
          </template>
        </form>
      </view>
    </view>
    <view class="foot">
      <template v-if="steps == 1">
        <view class="foot-desc">Already have an account?</view>
        <view @click="jumpLogin" class="btn">Login</view>
      </template>
      <template v-else>
        <view class="foot-desc">Have not get verification code?</view>
        <view @click="sendCode" class="btn" v-if="sendTime == 60">Re-send again</view>
        <view class="send-time" v-else>Re-send again {{ sendTime }}s</view>
      </template>
    </view>
  </view>
</template>

<script setup>
import { sendEmailCodeAPI, resetPasswordAPI } from '@/services/user'
import { ref } from 'vue'
const steps = ref(1)
const pic = '/static/images/login/mima@2x.png'
const newPic = ref(pic)
const confirmPic = ref(pic)
const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/

const onBack = () => {
  if (steps.value == 1) {
    uni.navigateBack()
  } else {
    steps.value = 1
  }
}
const newPassword = ref(true)
const confirmPassword = ref(true)
const changeStatus = (e) => {
  const { name } = e.target.dataset
  console.log(name)
  if (name === 'newPassword') {
    newPassword.value = !newPassword.value
  } else {
    confirmPassword.value = !confirmPassword.value
  }
}
const form = ref({
  account: '',
  verificationCode: '',
  newPassword: '',
  confirmPassword: '',
})
const onBlur = (e) => {
  const { name } = e.target.dataset
  if (name == 'account') {
    const emailVal = e.detail.value
    console.log(reg.test(emailVal), emailVal)
    if (!reg.test(emailVal)) {
      uni.showToast({
        title: 'Please enter the correct email address',
        icon: 'none',
      })
    }
  } else {
    const psd = e.detail.value
    if (psd.length < 6) {
      uni.showToast({
        title: `Please enter ${name} of at least 6 characters`,
        icon: 'none',
      })
      if (name == 'confirmPassword') {
        confirmPic.value = '/static/images/login/hongsuo@2x.png'
      } else {
        newPic.value = '/static/images/login/hongsuo@2x.png'
      }
    }
    if (
      form.value['newPassword'] &&
      form.value['confirmPassword'] &&
      form.value['newPassword'] !== form.value['confirmPassword']
    ) {
      uni.showToast({
        title: 'ConfirmPassword do not match please re-enter',
        icon: 'none',
      })
    }
  }
}
const onInput = (e) => {
  console.log(e)
  const { name } = e.target.dataset

  if (name == 'confirmPassword' && confirmPic.value == '/static/images/login/hongsuo@2x.png') {
    confirmPic.value = pic
  }
  if (name == 'newPassword' && newPic.value == '/static/images/login/hongsuo@2x.png') {
    newPic.value = pic
  }
  form.value[name] = e.detail.value
}
const formSubmit = (e) => {
  const { account, newPassword, confirmPassword, verificationCode } = e.detail.value
  if (steps.value === 1) {
    if (reg.test(account)) {
      sendCode(account)
    } else {
      uni.showToast({
        title: 'Please enter the correct email address',
        icon: 'none',
      })
    }
  } else {
    console.log(e, 'ffff')
    if (newPassword.length < 6) {
      uni.showToast({
        title: 'Please enter newPassword of at least 6 characters',
        icon: 'none',
      })
      newPic.value = '/static/images/login/hongsuo@2x.png'
    }
    if (newPassword.length < 6) return
    if (confirmPassword.length < 6) {
      uni.showToast({
        title: 'Please enter confirmPassword of at least 6 characters',
        icon: 'none',
      })
      confirmPassword.value = '/static/images/login/hongsuo@2x.png'
    }
    if (newPassword.length < 6) return
    if (newPassword === confirmPassword) {
      onResetPassword({
        account: form.value.account,
        newPassword,
        verificationCode,
      })
    } else {
      uni.showToast({
        title: 'The passwords do not match please re-enter',
        icon: 'none',
      })
    }
  }
}
const onResetPassword = (data) => {
  resetPasswordAPI(data)
    .then((res) => {
      console.log(res)
      const { code, data, msg } = res
      if (code == 200) {
        uni.showToast({
          title: 'Password reset successful!',
          icon: 'none',
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } else {
        uni.showToast({
          title: msg,
          icon: 'none',
        })
      }
    })
    .catch((err) => {
      console.log(err)
    })
}
const timer = ref(null)
const sendTime = ref(60)
// 发送验证码
const sendCode = () => {
  sendEmailCodeAPI({
    email: form.value.account,
    type: 2,
  })
    .then((res) => {
      console.log(res)
      const { code, data, msg } = res
      if (code == 200) {
        startSendCode()
        steps.value = 2
      } else {
        uni.showToast({
          title: msg,
          icon: 'none',
        })
      }
    })
    .catch((err) => {
      console.log(err)
    })
}
const startSendCode = () => {
  console.log(timer.value)
  if (timer.value) return
  console.log('ffff')
  sendTime.value = 59
  timer.value = setInterval(() => {
    if (sendTime.value > 0) {
      sendTime.value--
    } else {
      clearInterval(timer.value)
      timer.value = null
      sendTime.value = 60
    }
  }, 1000)
}

const jumpLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login',
  })
}
</script>

<style lang="scss" scoped>
.viewport {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(50px);

  .content {
    height: 90vh;

    .back-icon {
      width: 68rpx;
      height: 68rpx;
      margin: 100rpx 0 0 20rpx;
    }

    .login-box {
      margin: 140rpx 65rpx 0;

      .login-title {
        font-family: HarmonyOS_Sans_SC_Bold;
        font-size: 48rpx;
        font-weight: bold;
        color: #000000;
        line-height: 82rpx;
        margin-bottom: 22rpx;
      }

      .login-tips {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #000000;
        line-height: 45rpx;
        margin-bottom: 90rpx;
      }

      .input-box {
        display: flex;
        align-items: center;
        margin-bottom: 62rpx;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #ddd;

        .input {
          flex: auto;
        }

        .input-icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 10rpx;
        }

        .close-eye-icon,
        .open-eye-icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }

        .forgot-btn {
          font-weight: 400;
          font-size: 26rpx;
          color: #000000;
          line-height: 37rpx;
        }
      }

      .radio-box {
        display: flex;
        align-items: baseline;
        margin-bottom: 100rpx;

        .radio-label {
          font-weight: 400;
          font-size: 26rpx;
          color: rgba(0, 0, 0, 0.4);
          line-height: 40rpx;
        }
      }

      ::v-deep uni-button:after {
        border: none;
      }

      .submit-btn {
        background: linear-gradient(270deg, #5b5ef0 0%, #9e67fa 100%);
        border-radius: 47rpx;
        color: #fff;

        &.unactive {
          background: rgba(0, 0, 0, 0.05);
          color: rgba(0, 0, 0, 0.2);
          font-weight: bold;
        }
      }
    }
  }

  .foot {
    display: flex;
    justify-content: center;
    align-items: center;

    .foot-desc,
    .send-time {
      font-weight: 400;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.4);
      line-height: 40rpx;
      margin-right: 22rpx;
    }

    .btn {
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      text-decoration-line: underline;
    }
  }
}
</style>
